<template>
  <div class="play-box">
    <div class="title">{{ renderData.playTypeName }}</div>
    <subGameVav :data="renderData.lotteryPlayTypeList" @selectPlayType="selectPlayType" />

    <div class="game-nav-underline" />

    <div class="play-odds">
      <BUTTON
        @selectOdds="selectNumber(numItem, renderData.lotteryPlayTypeList[currentPlayTypeIndex].playTypeName)"
        v-for="(numItem, index) in getNumOddsList"
        :data="{ number: numItem.number, odds: numItem.maxOdds, color: numItem.color }"
        :key="index"
        :class="{ selected: getSelectNumOddsList.includes(numItem) }"
      />
    </div>
  </div>
</template>

<script>
// 投注格式还有问题， dream说改， 不知道后端改不改
import BUTTON from './odds-btn.vue'
import subGameVav from './sub-game-nav.vue'
import { handleStyleFromDifferentColorNum } from '@/config/markSixConfig.js'
import mixin from '@/mixin/xglhc-mixin.js'
import { showToast } from 'vant'
import { $utils } from '@utils'
import { submitBetNow } from '@/api'
import { NUMBER_CLR_MAP } from '@/components/game/xglhc/xglhc-constant'
import { useGameStore } from '@/stores/game'

export default {
  components: {
    BUTTON,
    subGameVav,
  },
  mixins: [mixin],

  props: {
    renderData: {},
  },
  watch: {
    currentList: {
      handler(list) {
        list.forEach((item) => NUMBER_CLR_MAP[item.number] && (item['color'] = NUMBER_CLR_MAP[item.number]))
      },
      deep: true,
      immediate: true,
    },
  },
  created() {
    // 生成渲染赔率需要的数组
    this.initOddsNumber()
  },
  methods: {
    // 连肖的赔率都是一样的， 后端不返回数字， 前端自己生成
    initOddsNumber() {
      this.renderData.lotteryPlayTypeList.forEach((game) => {
        const odds = []
        for (let i = 1; i <= 49; i++) {
          let oddEl = JSON.parse(JSON.stringify(game.cachePlayList[0]))
          oddEl.number = i.toString().padStart(2, '0')
          odds.push(oddEl)
        }
        game.cachePlayList = odds
      })
    },

    // 选择赔率
    selectNumber(item, preName) {
      // 之前选中的数据
      let list = this.getSelectNumOddsList
      item.betAmount = this.investStore.getSingleInvestMoney
      item['spliceName'] = `${preName}#${item.number}`
      // 多选的情况
      let findItem = list.indexOf(item)
      if (findItem === -1) {
        if (this.currentPlayTypeIndex + 1 < list.length) {
          showToast('超过最大选择数量')
          return
        }
        list.push(item)
        this.notifyParentInvestList(list)
      } else {
        list.splice(findItem, 1)
        this.notifyParentInvestList(list)
      }
    },

    // 重复投注， 填充最后一期投注号码
    fillLastNumber() {
      let list = this.investStore.lastInvestList //最后一次记录
      // 连码的提交格式，要成数组
      const betContent = list[0].betContent.split(' ')
      if (betContent.length > 1) {
        list = betContent.map((number) => {
          let obj = JSON.parse(JSON.stringify(list[0]))
          obj.number = number
          obj.playName = obj.playTypeCode
          delete obj.betContent
          return obj
        })
      }
      if (this.hasSonPlay) {
        this.selectNumberList[this.currentPlayTypeIndex] = list
        // this.$set(this.selectNumberList, this.currentPlayTypeIndex, list)
      } else {
        this.selectNumberList = list
      }
      this.investStore.setInputMoney(list[0].betAmount)
      this.notifyParentInvestList(list)
    },

    // 立即下注, 目前暂时有两种格式，
    async betNow() {
      if (!this.investStore.getInvestBtnText.canBat) {
        this.fillLastNumber()
        return
      }
      if (!$utils.verifyBetAmount(this.getSelectNumOddsList)) return

      let params = {
        lotteryCode: this.renderData.lotteryCode, //彩种类型，如六合彩LHC
        orderDetails: [],
      }

      const capCode = this.gameStore.currentHandicapCode
      if (capCode) params.handicapCode = capCode

      let betContent = ''
      this.getSelectNumOddsList.forEach((numItem) => {
        betContent += numItem.number + ' '
        params.orderDetails.push({
          lotteryCode: this.renderData.lotteryCode, // 彩种类型，如六合彩LHC
          playTypeCode: this.renderData.playTypeCode, // 彩种CODE，
          sonPlayTypeCode: numItem.sonPlayTypeCode, // 选中号码 的item信息
          playCode: numItem.playCode, // 选中号码 的item信息
          betContent: numItem.playCode, // 注单内容，与playCode保持一致
          betAmount: numItem.betAmount, // 单注金额
        })
      })
      params.orderDetails[0].betContent = betContent.trim()
      await submitBetNow({ lotteryCode: params.lotteryCode, orderDetails: [params.orderDetails[0]], handicapCode: params.handicapCode })
      this.investStore.setLastInvestList(params.orderDetails)
      this.initConfig()
      showToast('下注成功')
    },

    // 根据赔率号码类型 处理不同的样式
    handleStyleFromDifferentPlay(item) {
      let styleStore = handleStyleFromDifferentColorNum(item.number)
      if (this.getSelectNumOddsList.map((item) => item.number).includes(item.number)) {
        return styleStore.active
      }
      return styleStore.normal
    },
  },
}
</script>

<style scoped lang="less">
@import url('./common.less');
</style>
